<template>
  <el-form ref="addForm" :model="addForm" label-width="80px">
    <el-form-item label="金额">
      <el-input
        v-model="addForm.amount"
        placeholder="请输入账单金额"
        style="width: 400px"
      ></el-input>
    </el-form-item>
    <el-form-item label="类型">
      <div>
        <!-- <el-tag
            v-for="tag in billTypeList"
            :key="tag.billType"
            :type="tagType"
            effect="dark"
            style="margin-left: 10px"
            @click="changeTag()"
          >
            {{ tag.billType }}
          </el-tag> -->
        <el-select
          v-model="addForm.type"
          placeholder="请选择账单类型"
          style="width: 400px"
        >
          <el-option
            v-for="item in billTypeList"
            :key="item.billType"
            :value="item.billType"
          >
          </el-option>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
        v-model="addForm.logDate"
        type="date"
        placeholder="选择日期"
        style="width: 400px"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="备注">
      <el-input
        v-model="addForm.remark"
        placeholder="请输入备注"
        style="width: 400px"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('billForm')">提交</el-button>
      <el-button @click="resetForm()">重置</el-button>
      <el-button @click="closeDialog()">关闭</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { add } from "@/api/bill";
export default {
  props: {
    addForm: {
      type: Object,
      default: () => {},
    },
    activeName: {
      type: String,
      default: () => "",
    },
    billTypeList: {
      type: Array,
      default: () => [],
    },
    closeDialog: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      tagType: "success",
    };
  },
  methods: {
    changeTag() {
      this.tagType = "info";
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        const teamName = this.$store.getters.teamName;
        this.addForm.userName = this.$store.getters.name;
        this.addForm.teamName = teamName;
        if (teamName == "个人版") {
          this.addForm.isTeam = 0;
        } else {
          this.addForm.isTeam = 1;
        }
        if (this.activeName == "income") {
          this.addForm.isIncome = 1;
        } else if (this.activeName == "outcome") {
          this.addForm.isIncome = 0;
        }
        if (valid) {
          add(this.addForm).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.closeDialog();
              this.resetForm();
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        }
      });
    },
    resetForm() {
      this.addForm = {
        amount: "",
        userName: "",
        teamName: "",
        isTeam: "",
        isIncome: "",
        logDate: "",
        billType: "",
        remark: "",
      };
    },
  },
  mounted() {},
};
</script>